<template>
  <div>
    <mt-popup v-model="popupVisible" position="right" class="date-choice">
      <customHeader middleTitle="选择日期" @leftCallBack="back" />
      <!-- <div class="date-radio-list">
        <span class="item" :class="{select:item.checked}" v-for="(item,index) in radioList" :key="index" @click="dateRadioSelect(item)">
          {{ item.label }}
        </span>
      </div> -->
      <div class="user-defined" style="margin-top:1rem">
        <span class="label">自定义时间</span>
        <div class="inpt" @click="startPicker">
          <span>{{startDate}} ～ {{endDate}}</span>
          <span class="zhk-activity_rl"></span>
        </div>
      </div>
    </mt-popup>
    <mt-datetime-picker ref="startPicker" v-model="dateModel" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" confirmText="下一步" @confirm="endPicker" @cancel="cancelPicker" :startDate="initialStartDateScope" :endDate="sEndDate" >
    </mt-datetime-picker>
    <mt-datetime-picker ref="endPicker" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" :startDate="startDateScope" :endDate="endDateScope" @confirm="dateChoice" @cancel="cancelPicker">
    </mt-datetime-picker>
  </div>
</template>

<script>
import Vue from "vue";
import { DatetimePicker, Popup } from "mint-ui";
import customHeader from "../../components/header/header";
Vue.component(DatetimePicker.name, DatetimePicker);
Vue.component(Popup.name, Popup);
export default {
  name: "DateChoice",
  data() {
    return {
      startDate: "开始日期",
      endDate: "结束日期",
      selectValue: "1",
      popupVisible: false,
      startSelectDate: null,
      endSelectDate: null,
      dateName: "选择日期",
      startDateScope: new Date(),
      endDateScope: new Date(),
      sEndDate: new Date(),
      radioList: [
        { label: "今天", value: "1", checked: true },
        { label: "昨天", value: "2", checked: false },
        { label: "近7天", value: "3", checked: false },
        { label: "近30天", value: "4", checked: false },
        { label: "近90天", value: "5", checked: false }
      ],
      dateModel:new Date(),
    };
  },
  components: {
    customHeader
  },
  props: {
    initialStartDateScope: {
      type: Date,
      default: () => {
        let dt = new Date();
        dt.setMonth( dt.getMonth()-5 );
        dt.setDate(1);
        return dt;
      }
    },
    defaultDate: {
      type: String,
      default: "today"
    }
  },
  methods: {
    //固定日期项选择
    dateRadioSelect(item) {
      this.cancelPicker();
      this.radioList.forEach(function(currentValue, index, arr) {
        if (item.label === currentValue.label) {
          currentValue.checked = true;
        } else {
          currentValue.checked = false;
        }
      });
      this.dateName = item.label;
      this.selectValue = item.value;
      this.popupHide();
    },
    //日期选择展开
    startPicker() {
      this.$refs.startPicker.open();
    },
    //结束日期展开
    endPicker(e) {
      const startDate = e.getFullYear() + "年" + (e.getMonth() + 1) + "月" + e.getDate() + "日";
      let iToDay = e.getDate();
      let iToMon = e.getMonth();
      let iToYear = e.getFullYear();
      let newDay = new Date(iToYear, iToMon, iToDay + 31);
      
      this.startDateScope = e;
      if(newDay>this.sEndDate){
         this.endDateScope = this.sEndDate;
      }else{
        this.endDateScope = newDay;
      }
    
      this.startDate = startDate;
      this.$refs.endPicker.open();
      this.startSelectDate = e;
    },
    //结束日期选择
    dateChoice(e) {
      const endDate = e.getFullYear() + "年" + (e.getMonth() + 1) + "月" + e.getDate() + "日";
      this.endDate = endDate;
      this.endSelectDate = e;
      //选择日期后近几日选项非选中
      const radioList = $(".date-radio-list .item");
      for (let i = 0; i < radioList.length; i++) {
        radioList[i].className = "item";
      }
      //组件内部的回显
      this.selectValue = this.startDate + "～" + this.endDate;
      //回显到组件外面的时间格式01-01至01-01
      const Appendzero = obj => {
        if (obj < 10) return "0" + "" + obj;
        else return obj;
      };
      const satrtDateName = Appendzero(this.startSelectDate.getMonth() + 1) + "-" + Appendzero(this.startSelectDate.getDate());
      const endDateName = Appendzero(e.getMonth() + 1) + "-" + Appendzero(e.getDate());
      this.dateName = satrtDateName + "至" + endDateName;
      this.popupHide();
    },
    //关闭日期组件
    cancelPicker() {
      const selectValue = this.selectValue;
      this.startDate = "开始日期";
      this.endDate = "结束日期";
      this.selectValue = selectValue;
      this.startSelectDate = null;
      this.endSelectDate = null;
    },
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      // if (this.startSelectDate) {
      //   if (!this.endSelectDate) {
      //     Toast("请选择结束日期");
      //     return;
      //   }
      // }
     
      const selectObj = {
        startDate: this.startSelectDate,
        endDate: this.endSelectDate,
        selectRadio: this.startSelectDate ? "0" : this.selectValue
      };
      this.$emit("listenToDateChoice", selectObj, this.dateName);
       this.popupVisible = false;
    },
    back() {
      this.popupVisible = false;
    }
  },
  // watch: {
  //   startSelectDate(val) {
  //     if (val) {
  //       this.radioList.forEach(function(item) {
  //         item.checked = false;
  //       });
  //     }
  //   }
  // }
};
</script>

<style lang="scss" scoped>
@import "DateChoice";
</style>
